<template>
  <el-dialog class="roleDialogWrapper" :title="dialogTitle" :visible.sync="dialogVisible" :width="width"
             :append-to-body="true" @open="beforeOpen" @closed="afterClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small"
             :disabled="submitLoading || queryLoading">
      <el-row :gutter="16">
        <el-col :span="12">

        </el-col>
        <el-col :span="12">
          <el-form-item label="角色编号" prop="roleId" v-if="this.type !== this.typeAdd"
                        :rules="[{ required: true, message: '角色编号不能为空', trigger: 'blur' }]">
            <el-input :disabled="true" type="text" v-model="form.roleId" placeholder="角色编号"/>
          </el-form-item>
          <el-form-item label="角色名称" prop="roleName">
            <el-input type="text" v-model="form.roleName" placeholder="角色名称"/>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input type="text" v-model="form.roleDesc" placeholder="角色描述"/>
          </el-form-item>
          <el-form-item label="角色备注" prop="remark">
            <el-input type="text" v-model="form.remark" placeholder="角色备注"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="roleBeginTime">
            <el-date-picker v-model="form.roleBeginTime" placeholder="角色有效时间开始时间"/>
          </el-form-item>
          <el-form-item label="结束时间" prop="roleEndTime">
            <el-date-picker v-model="form.roleEndTime" placeholder="角色有效时间结束时间"/>
          </el-form-item>
          <el-form-item label="是否固化" prop="solidifyFlag">
            <el-select v-model="form.solidifyFlag" placeholder="是否固化，固化的角色不能修改">
              <el-option label="固化角色" :value="1"/>
              <el-option label="非固化角色" :value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item label="作用对象" prop="storeEmploy">
            <el-select v-model="form.storeEmploy" placeholder="作用对象">
              <el-option label="店铺管理员" :value="1"/>
              <el-option label="后台管理员" :value="0"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="closeDialog" size="small">取消</el-button>
      <el-button v-if="type === this.typeAdd || type === this.typeEdit" @click="resetDialog" :loading="queryLoading" icon="el-icon-refresh"
                 :disabled="queryLoading || submitLoading" size="small">重置</el-button>
      <el-button v-if="type === this.typeAdd || type === this.typeEdit" @click="handleValidateData" size="small">校验</el-button>
      <el-button v-if="type === this.typeEdit" type="primary" @click="handleChangeRole" size="small"
                 :disabled="queryLoading || submitLoading" :loading="submitLoading">提交修改</el-button>
      <el-button v-if="type === this.typeAdd" type="primary" @click="handleAddRole"
                 :loading="submitLoading" size="small">添加</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ResultCode } from '@/constants/constants'
import { changeAdminRole, insertAdminRole, queryAdminRoleById } from '@/api/ApiRole'
import RoleInsertAdminDTO from '@/api/entity/RoleInsertAdminDTO'
import RoleChangeDTO from '@/api/entity/RoleChangeDTO'

export default {
  name: 'RoleDialog',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    width: {
      require: false,
      type: String,
      default: '60%'
    },
    type: {
      require: true,
      type: String
    },
    id: {
      require: false,
      type: [String, Number],
      default: 0
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      dialogVisible: false,
      typeAdd: 'add',
      typeEdit: 'edit',
      form: this.initDialogData(),
      rules: {
        roleName: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' }
        ],
        solidifyFlag: [
          { required: true, message: '固化标志不能为空', trigger: ['blur', 'change'] }
        ],
        storeEmploy: [
          { required: true, message: '作用对象不能为空', trigger: ['blur', 'change'] }
        ]
      },
      queryLoading: false,
      submitLoading: false
    }
  },
  computed: {
    dialogTitle () {
      switch (this.type) {
        case this.typeAdd:
          return '添加角色'
        case this.typeEdit:
          return '编辑角色'
      }
      return ''
    }
  },
  methods: {
    closeDialog () {
      this.dialogVisible = false
    },
    initDialog () {
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    },
    initDialogData () {
      this.initDialog()
      return {
        solidifyFlag: 0,
        storeEmploy: 0
      }
    },
    queryRoleToDialog () {
      this.queryLoading = true
      queryAdminRoleById(this.id, data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object
          this.form = data
        }
      }, () => {
        this.queryLoading = false
      })
    },
    beforeOpen () {
      // 添加角色数据
      switch (this.type) {
        case this.typeAdd:
          this.form = this.initDialogData()
          break
        case this.typeEdit:
          this.form = this.initDialogData()
          this.queryRoleToDialog()
          break
        default:
      }
    },
    afterClose () {
      this.form = this.initDialogData()
    },
    resetDialog () {
      if (this.type === this.typeEdit) {
        this.queryRoleToDialog()
      } else if (this.type === this.typeAdd) {
        this.initDialogData()
      }
    },
    handleAddRole () {
      this.$refs.form.validate((success) => {
        if (success) {
          const roleDTO = RoleInsertAdminDTO.instance()
          Object.assign(roleDTO, this.form)
          roleDTO.roleId = undefined
          this.submitLoading = true
          insertAdminRole([roleDTO], () => {
            this.$message.success('添加角色数据成功')
            this.dialogVisible = false
            this.$emit('update')
          }, () => {
            this.submitLoading = false
          })
        }
      })
    },
    /**
       * 校验数据
       */
    handleValidateData () {
      this.$refs.form.validate((success) => {
        if (success) {
          this.$message.success('校验成功')
        } else {
          this.$message.error('校验失败')
        }
      })
    },
    handleChangeRole () {
      this.$refs.form.validate((success) => {
        if (success) {
          const roleChangeDTO = RoleChangeDTO.instance()
          Object.assign(roleChangeDTO, this.form)
          this.submitLoading = true
          changeAdminRole([roleChangeDTO], data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('更新成功')
              this.dialogVisible = false
              this.$emit('update')
            }
          }, () => {
            this.submitLoading = false
          })
        }
      })
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    }
  }
}
</script>

<style scoped lang="scss">
.roleDialogWrapper{

}
</style>
